<template>
  <div style class="column center">
    <div style="height:600px;overflow-y: scroll;">
      <div id="printBill">
        <div
          style="font-size: 10px;color: #000;margin: 15px auto;width:280px;height:190px;border :1px solid #fff;"
        >
          <div v-for="(item,index) in lookSkuList" :key="index">
            <table border="1" style="border-collapse: collapse;width: 100%;">
              <tr>
                <th colspan="1">品名</th>
                <th colspan="2" style="width: 50%;">
                  <div
                    style="overflow: hidden;
                    padding: 3px;
       text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;"
                  >{{ item.productName }}</div>
                </th>
                <!-- <th rowspan="2">居住地</th> -->
              </tr>
              <tr>
                <th colspan="1">编码/条码</th>
                <th colspan="1" style="padding-left: 10px">
                  {{ item.productNo }}
                  <!-- <img :id="'barcode'+index" /> -->
                </th>
                <th colspan="3" rowspan="3">
                  <div
                    style="text-align: center;align-items: center;display: flex;flex-direction: column;    padding: 3px;"
                  >
                    <img style="width: 80px;height:80px" :src="item.qrCodeUrl" alt />
                    <div style="text-align: center;padding: 12px 0;font-size:8px;">扫一扫查看详情</div>
                  </div>
                </th>
                <!-- <th rowspan="2">居住地</th> -->
              </tr>
              <tr>
                <th colspan="1">贸易方式</th>
                <th colspan="1">{{ item.tradeTypeName }}</th>
              </tr>
              <tr>
                <th colspan="1" rowspan="2">参考价</th>
                <th colspan="1" rowspan="2">
                  <span style="font-size: 24px;">￥{{ item.productPrice }}</span>
                </th>
              </tr>
            </table>
            <div style="text-align: center;font-size:10px;padding: 15px 0;">最终价格以线上/收银显示为准</div>
          </div>
          <!-- <div style="page-break-after:always"></div> -->
        </div>
      </div>
    </div>

    <div class="row flex-end" style="text-align: right;padding: 30px;">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="billPrintClick">打印</el-button>
      <!-- <el-button type="primary" @click="billPrintClick1">打印2</el-button> -->
      <!-- <el-button type="primary" @click="billPrintClick1">打印样式2</el-button>
      <el-button type="primary" @click="billPrintClick2">打印样式3</el-button>
      <el-button type="primary" @click="billPrintClick3">打印样式4</el-button>-->
      <!-- <el-button type="primary" @click="printAll">打印2</el-button> -->
      <!-- <el-button type="primary" @click="printAll">js原生打印</el-button>
      <el-button type="success" @click="billPrintClick">printJS打印</el-button>-->
    </div>
  </div>
</template>
 
<script>
import JsBarcode from "jsbarcode";
import printJS from "print-js";
export default {
  props: {
    lookSkuList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      barcodeValue: "123456789012",
      isBorder: "1px solid #000000",
      isLoading: null,
      title: "*******资金往来结算票据",
      year: "2023",
      month: "1",
      day: "1",
      id: "211000101251",
      ChequeNumber: "454454548212655995",
      sum: "壹佰捌拾圆整",
      sumNumber: "180.00",
      PayerUnit: "单位名称",
      payee: "章小鱼",
      Payer: "章小鱼",
      project: "餐补、住房补贴、出行补贴",
      content: "早餐、午餐、晚餐、住房补贴、出行补贴",
      money: "60.00/天、70.00/天、50.00/天"
    };
  },
  mounted() {
    // this.lll();
    window.addEventListener("beforeprint", () => {
      // 打印开始时触发
      this.isLoading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      //打印开始时隐藏不必要显示的样式
      // this.isBorder = 'none'
    });
    window.addEventListener("afterprint", () => {
      // 打印结束是触发
      this.isLoading.close();
      //打印结束恢复必要显示的样式
      // this.isBorder = '1px solid #000000'
    });
  },
  methods: {
    lll() {
      this.$nextTick(() => {
        this.lookSkuList.map((res, index) => {
          if (res.productNo) {
            JsBarcode("#barcode" + index, res.productNo, {
              format: "CODE128", //条形码的格式
              lineColor: "#000", //线条颜色
              width: 1, //线宽
              height: 10, //条码高度
              displayValue: true //是否显示文字信息
            });
          }
        });
      });
    },
    close() {
      this.$emit("close");
    },
    //原生的打印
    printAll() {
      // const printHTML = document.querySelector('#printBill').innerHTML
      // // 将打印的区域赋值，进行打印 这种会出现多余的空白页
      // window.document.body.innerHTML = printHTML
      // window.print() // 调用window打印方法
      // window.location.reload() // 打印完成后重新加载页面
      const printHTML = document.querySelector("#printBill");
      window.document.body.innerHTML = "";
      // 将打印的区域赋值，进行打印  解决上面赋值方法
      window.document.body.appendChild(printHTML);
      window.print(); // 调用window打印方法
      window.location.reload(); // 打印完成后重新加载页面
    },
    //打印
    billPrintClick() {
      setTimeout(function() {
        const paperSize = { width: "8cm", height: "6cm" };
        const style = "@page {margin:-5mm 0mm 0mm 5mm};";
        printJS({
          printable: "printBill", // 标签元素id
          type: "html",
          header: "",
          style,
          pageSize: paperSize,
          // style:
          //   "@page { size: auto;  margin: 0mm; } html, body { width: auto; height: auto; }",
          // style: `@media print { body{margin:0 5px}}`,

          // style:
          //   "@media print{ @page { size: A4; margin: 0mm; mso-header: none; mso-footer: none; } body{margin:0px 5px }}",
          targetStyles: ["*"],
          scanStyles: false //打印必须加上，不然页面上的css样式无效
        });
      }, 100);
    },
    //打印
    billPrintClick1() {
      setTimeout(function() {
        const style = "@page {margin:-5mm 0mm 0mm 10mm};"; //打印时去掉眉页眉尾
        printJS({
          printable: "printBill", // 标签元素id
          type: "html",
          header: "",
          style,
          // style:
          //   "@page { size: auto;  margin: 0mm; } html, body { width: auto; height: auto; }",
          // style: `@media print { body{margin:0 5px}}`,

          // style:
          //   "@media print{ @page { size: A4; margin: 0mm; mso-header: none; mso-footer: none; } body{margin:0px 5px }}",
          targetStyles: ["*"],
          scanStyles: false //打印必须加上，不然页面上的css样式无效
        });
      }, 100);
    }
  }
};
</script>
 
<style lang="scss" scoped>
::v-deep .el-textarea__inner {
  border: none;
}
@media print {
  #receipt-container {
    page-break-after: always; /* 每个小票后强制分页 */
  }
  table {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  @page {
    //landscape横向,portrait;纵向，如果不设置，则页面有横向和纵向的选择框
    // size: A4 portrait;
    //国家标准公文页边距 GB/T 9704-2012
    // margin: 3.7cm 2.6cm 3.5cm;
    margin: 0;
    padding: 0;
    // margin: 4mm 10mm;
  }
}
</style>
<style media="print">
@page {
  size: auto;
  margin: 3mm;
}

html {
  background-color: #ffffff;
  margin: 0px;
}

body {
  border: solid 1px #ffffff;
  margin: 10mm 15mm 10mm 15mm;
}
</style>
